<template>
  <div class="previewBox">
    <el-row>
      <el-col :span="4" :offset="20">
        <el-switch
          :width="30"
          v-model="lineStyleTime"
          active-color="#409EFF"
          active-value="month"
          active-text="月"
          inactive-color="#409EFF"
          inactive-value="week"
          inactive-text="周"
          @change="getData"
        />
      </el-col>
    </el-row>
    <el-row :gutter="1" style="margin:20px 0;">
      <el-col :span="14">
        <studenttop :user-name-array="userNameArray" :num-array="numArray" :key="key"/>
      </el-col>
      <el-col :span="10">
        <studentcor :finish-num="finishNum" :un-start-num="unStartNum" :on-going-num="onGoingNum"/>
      </el-col>
    </el-row>
    <el-row :gutter="1" style="margin:20px 0;">
      <el-col :span="24">
        <studentage :data-array="dataArray" :date-array="dateArray" :key="key"/>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Studenttop from './components/studentpreview/studenttop'
import Studentcor from './components/studentpreview/studentcor'
import Studentage from './components/studentpreview/studentage'
import { getTenantId } from '@/utils/auth'
import { getUserPreviewData } from '@/api/user/user'
export default {
  components: {
    Studenttop,
    Studentcor,
    Studentage
  },
  data() {
    return {
      lineStyleTime: 'week',
      userNameArray: [],
      numArray: [],
      finishNum: 0,
      unStartNum: 0,
      onGoingNum: 0,
      dataArray: [],
      dateArray: [],
      key: 0
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const params = {}
      params.timeType = this.lineStyleTime
      params.userType = 'STUDENT'
      params.tenantId = getTenantId()
      getUserPreviewData(params).then(res => {
        this.userNameArray = res.data.userNameArray
        this.numArray = res.data.numArray

        this.finishNum = res.data.finishNum
        this.unStartNum = res.data.unStartNum
        this.onGoingNum = res.data.onGoingNum

        this.dataArray = res.data.dataArray
        this.dateArray = res.data.dateArray
        this.key++
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.previewBox {
  padding: 20px;
}
</style>
